<template>
	<view class="content">
		<view class="one-infor">
			<view v-if='language=="0"'>頭像</view>
			<view v-else>Profile photo</view>
			<view class="right-infor" @click="chooseImg">
				<view class="head">
					<image v-if="newAvatar" :src="imgUrl+newAvatar" mode=""></image>
					<image v-else :src="imgUrl+myInfor.avatar" mode=""></image>
				</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<view class="one-infor" @click="showChange=true;changeType=1">
			<view v-if='language=="0"'>暱稱</view>
			<view v-else>Nickname</view>
			<view class="right-infor">
				<view>{{myInfor.nickname}}</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<view class="one-infor" @click="showSex=true">
			<view  v-if='language=="0"'>性別</view>
			<view v-else>Sex</view>
			<view class="right-infor" v-if="language=='0'">
				<view v-if="myInfor.gender==0">女</view>
				<view v-else>男</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
			<view class="right-infor" v-else>
				<view v-if="myInfor.gender==0">Female</view>
				<view v-else>Male</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<view class="one-infor" @click="showChooseTime=true">
			<view v-if="language=='0'">出生日期</view>
			<view v-else>Birthdate</view>
			<view class="right-infor">
				<view v-if="birthday">{{birthday}}</view>
				<view v-else>{{myInfor.birthday}}</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<view class="one-infor" style="border:none;" @click="showChange=true;changeType=2">
			<view v-if="language=='0'">郵箱</view>
			<view v-else>Mail box</view>
			<view class="right-infor">
				<view v-if="email">{{email}}</view>
				<view v-else>{{myInfor.email}}</view>
				<image class="open" src="../../static/image/mine/open.png" mode=""></image>
			</view>
		</view>
		<u-popup :show="showChange" @close="close" mode='center' round='15'>
			<view class="fill_reason"  v-if="language=='0'">
				<view class="title">
					<text v-if="changeType==1">暱稱修改</text>
					<text v-else>郵箱修改</text>
					<image src="../../static/image/close.png" @click="showName=false" mode=""></image>
				</view>
				<input v-if="changeType==1" type="text" placeholder="點擊輸入暱稱" v-model="newNickName">
				<input v-else type="text" placeholder="點擊輸入郵箱" v-model="email">
				<u-button shape="circle" color='#040404' type="success" @click="saveName"
					style="margin-top:100rpx;">确定</u-button>
			</view>
			<view class="fill_reason"  v-else>
				<view class="title">
					<text v-if="changeType==1">Change nickname</text>
					<text v-else>Modify email</text>
					<image src="../../static/image/close.png" @click="showName=false" mode=""></image>
				</view>
				<input v-if="changeType==1" type="text" placeholder="Enter Nickname" v-model="newNickName">
				<input v-else type="text" placeholder="Enter email" v-model="email">
				<u-button shape="circle" color='#040404' type="success" @click="saveName"
					style="margin-top:100rpx;">Ok</u-button>
			</view>
		</u-popup>
		<u-picker :show="showSex" :closeOnClickOverlay='true' :columns="columns" @close='close' itemHeight='88'
			@confirm='chooseSex' @cancel='close' keyName='label'></u-picker>
		<u-datetime-picker :show="showChooseTime" :minDate='26661000' :closeOnClickOverlay='true' @cancel='close'
			@confirm='chooseBirthday' @close='close' itemHeight='88' v-model="value1" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	import { changeMineInfor } from '../../request/api.js'
	export default {
		data() {
			return {
				birthday: '',
				changeType:1,
				gender: 0,
				value1: '',
				email:'',
				showSex: false,
				showChooseTime: false,
				showChange:false,
				newNickName:'',
				newAvatar:'',
				columns: [
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 0
					}]
				]
			};
		},
		onShow() {
			console.log(this.myInfor);
			this.gender=this.myInfor.gender;
			if(this.language=='0'){
				this.columns=[
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 0
					}]
				]
			}else{
				this.columns=[
					[{
						label: 'Male',
						id: 1
					}, {
						label: 'Female',
						id: 0
					}]
				]
			}
		},
		computed: {
			myInfor() {
				return this.$store.getters.myInfor
			},
			imgUrl() {
				return this.$store.state.user.imgUrl
			},
			language(){
				return this.$store.state.user.language
			}
		},
		methods: {
			// 选择头像
			chooseImg() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success:async res => {
						console.log(res, '头像res');
						const result = await this.uploadFilePromise(res.tempFilePaths[0]);
						console.log(result);
						this.newAvatar=result.url;
						this.upLoodInfor()
					}
				});
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.imgUrl + '/api/common/upload', //后端接口地址
						filePath: url,
						name: 'file', //传给后端参数
						header: {
							'token': uni.getStorageSync('token')
						},
						formData: {
							path: 'avatar/user'
						},
						success: (res) => {
							console.log(res);
							if (res.statusCode == 200) {
								resolve({
									url: JSON.parse(res.data).data.url,
									status: 'success'
								})
							} else {
								resolve({
									url: url,
									status: 'failed'
								})
							}
						}
					});
				})
			},
			saveName(){
				this.showChange=false;
				this.upLoodInfor()
			},
			async upLoodInfor(){
				uni.showLoading({
					title:'修改中...'
				})
				let res = await changeMineInfor({
					nickname:this.newNickName?this.newNickName:this.myInfor.nickname,
					avatar:this.newAvatar?this.newAvatar:this.myInfor.avatar,
					gender:this.gender,
					birthday:this.birthday?this.birthday:this.myInfor.birthday,
					email:this.email?this.email:this.myInfor.email
				})
				uni.hideLoading();
				if(res.code==1){
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					this.$store.dispatch("user/getMyInfor");
				}else{
					uni.showToast({
						title:res.msg,
						icon: 'none'
					})
				}
			},
			chooseSex(e) {
				this.gender = e.value[0].id;
				this.showSex = false;
				this.upLoodInfor();
			},
			close() {
				this.showChooseTime = false;
				this.showSex = false;
				this.showChange=false;
			},
			chooseBirthday(e) {
				let time = new Date(e.value)
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let data = time.getDate();
				this.birthday = year + '-' + month + '-' + data;
				this.showChooseTime = false;
				this.upLoodInfor();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;

		.content {
			width: 702rpx;
			margin-left: auto;
			margin-right: auto;
			margin-top: 24rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204, 204, 204, 0.3);
			font-size: 30rpx;
			color: #040404;
			line-height: 42rpx;
			.fill_reason {
				padding: 0 30rpx;
				padding-top: 30rpx;
				padding-bottom: 50rpx;	
				width:500rpx;
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
			
					.ruler {
						font-size: 24rpx;
						color: #EA333F;
					}
			
					text {
						font-size: 32rpx;
						color: #3A3A3A;
					}
			
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			
				input {
					border-bottom: 1px solid #eeeeee;
					margin-top: 60rpx;
					padding-bottom: 10rpx;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
			}
			.one-infor {
				padding: 24rpx 0;
				border-bottom: 1px solid #F0F0F0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.head {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 116rpx;
						height: 116rpx;
					}
				}

				.right-infor {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 28rpx;
					color: #666;

					.open {
						width: 13rpx;
						height: 20rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>